<!DOCTYPE html>
<html>
<head>
    <script src="/js/jquery-1.10.2.min.js"></script>
    <!--<script src="/js/jquery.extend.js"></script>-->
    <link rel="stylesheet" href="/css/common/font-awesome.min.css">
    <!--layui ztree样式-->
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
    <script src="/plugins/layer/layer.js"></script>
    <script src="/plugins/layui/layui.js"></script>
    <!--样式-->
    <link rel="stylesheet" href="/css/common/cyType.css">
    <link rel="stylesheet" href="/css/common/cyStyle.css">
    <link rel="stylesheet" href="/css/function/menuList.css">
    <script src="/plugins/editgrid/plugin/My97DatePicker/WdatePicker.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--<div class="layuimini-container">-->
    <div class="layuimini-main">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12 layui-col-md2">

                <div class="layui-card top-panel">
                    <div class="layui-card-header">已录入的学生总数</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs9 layui-col-md9 top-panel-number" id="studentCount">
                                9,054,056
                            </div>

                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-col-xs12 layui-col-md2">

                <div class="layui-card top-panel">
                    <div class="layui-card-header">已注册的学生总数</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs9 layui-col-md9 top-panel-number" id="studentUserCount">
                                9,054,056
                            </div>

                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-col-xs12 layui-col-md2">

                <div class="layui-card top-panel">
                    <div class="layui-card-header">已注册的教师总数</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs9 layui-col-md9 top-panel-number" id="teacherUserCount">
                                9,054,056
                            </div>

                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-col-xs12 layui-col-md2">

                <div class="layui-card top-panel">
                    <div class="layui-card-header">已注册的企业总数</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs9 layui-col-md9 top-panel-number" id="companyUserCount">
                                9,054,056
                            </div>

                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-col-xs12 layui-col-md2">

                <div class="layui-card top-panel">
                    <div class="layui-card-header">已参加实习计划的学生数</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs9 layui-col-md9 top-panel-number" id="planStudentCount">
                                9,054,056
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-col-xs12 layui-col-md2">

                <div class="layui-card top-panel">
                    <div class="layui-card-header">已选择实习岗位的学生数</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs9 layui-col-md9 top-panel-number" id="jobStudentCount">
                                9,054,056
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12 layui-col-md12 ">
                <div id="map1" style="background-color: #ffffff!important;;min-height:400px;padding: 10px"></div>
            </div>

        </div>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs6 layui-col-md6 ">
                <div id="map2" style="background-color:#ffffff!important;;min-height:400px;padding: 10px"></div>
            </div>
            <div class="layui-col-xs6 layui-col-md6 ">
                <div id="map3" style="background-color: #ffffff!important;;min-height:400px;padding: 10px"></div>
            </div>
        </div>






    </div>
<!--</div>-->

<script type="text/javascript" src="/plugins/echarts/echarts.js"></script>
<script src="/js/common.js" charset="utf-8"></script>

<script>
    layui.use(['layer'], function () {
        var $ = layui.jquery,
            layer = layui.layer;

        // 查询统计数
        $.ajax({
            type:"get",
            async:false,
            url:"/plan/getCount/",
            success:function(result) {
                if (result.code = 200) {
                    data = result.data;
                    $("#studentCount").text(data.studentCount)
                    $("#studentUserCount").text(data.studentUserCount)
                    $("#teacherUserCount").text(data.teacherUserCount)
                    $("#companyUserCount").text(data.companyUserCount)
                    $("#planStudentCount").text(data.planStudentCount)
                    $("#jobStudentCount").text(data.jobStudentCount)
                } else {
                    layer.msg(result.msg);
                }
            },
            error:function(result) {
                layer.msg("系统异常");
            }
        });

        var myChart1 = echarts.init(document.getElementById('map1'));
        var legend1 = []
        var result1 = []
        $.ajax({
            type:"get",
            async:false,
            url:"/plan/getStudentProfessionalMap",
            success:function(result) {
                if (result.code = 200) { 
                    data = result.data;
                    legend1 = data.legend
                    result1 = data.result
                } else {
                    errorMsg(result.msg);
                }
            },
            error:function(result) {
                errorMsg("系统异常");
            }
        });

        option1 = {
            title: {
                text: '学生专业分布',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: legend1
            },
            series: [
                {
                    name: '学生专业',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: result1,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart1.setOption(option1);


        var myChart2 = echarts.init(document.getElementById('map2'));
        var legend2 = []
        var result2 = []

        $.ajax({
            type:"get",
            async:false,
            url:"/plan/getStudentPlanMap",
            success:function(result) {
                if (result.code = 200) { 
                    data = result.data;
                    legend2 = data.legend
                    result2 = data.result
                } else {
                    layer.msg(result.msg);
                }
            },
            error:function(result) {
                layer.msg("系统异常");
            }
        });

        option2 = {
            title: {
                text: '学生实习计划参与情况',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: legend2
            },
            series: [
                {
                    name: '学生实习计划参与',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: result2,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        myChart2.setOption(option2);

        var myChart3 = echarts.init(document.getElementById('map3'));

        var legend3 = []
        var result3 = []
        $.ajax({
            type:"get",
            async:false,
            url:"/plan/getStudentJobMap",
            success:function(result) {
                if (result.code = 200) {
                    data = result.data;
                    legend3 = data.legend
                    result3 = data.result
                } else {
                    layer.msg(result.msg);
                }
            },
            error:function(result) {
                layer.msg("系统异常");
            }
        });

        option3 = {
            title: {
                text: '学生实习岗位参与情况',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: legend3
            },
            series: [
                {
                    name: '学生实习岗位参与情况',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: result3,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        myChart3.setOption(option3);


        // echarts 窗口缩放自适应
        window.onresize = function () {
            myChart1.resize();
            myChart2.resize();
            myChart3.resize();
        }

    });
</script>
</body>
</html>
